<div class="main-container">

    <div class="left">
        <div class="tree-wrap">
            <nz-tree nzExpandAll="true" [nzData]="dataSource" [nzSelectedKeys]="defaultKeys"
                [nzExpandedKeys]="expandKeys" [nzTreeTemplate]="treeNode" [nzSearchValue]="searchValue"
                (nzClick)="checkDetail($event)">
            </nz-tree>
            <ng-template #treeNode let-node>
                <div class="custom-node" [class.active]="activedNode?.key === node.key">
                    <span class="span-node">{{node.title}}</span>
                    <div class="tree-btns">
                        <a color="primary" *ngIf="node.origin.id!==0" (click)="editNode(node.origin,$event)">修改</a>
                        <a color="primary" (click)="addNode(node.origin,$event)">新增下级</a>
                        <a nz-popconfirm  *ngIf="node.origin.id!==0" nzPopconfirmTitle="确认删除该节点吗？" nzPopconfirmPlacement="left"
                            (nzOnConfirm)="deleteNode(node.origin,$event)">删除
                        </a>
                    </div>
                </div>
            </ng-template>
        </div>
    </div>
    <div class="right-panel">
        <nz-card class="top-card" nzTitle="单位职责">
            <p>
                {{ duty }}
            </p>
        </nz-card>
        <nz-card class="bottom-card" nzTitle="安全管理人员" [nzExtra]="btnGroupWebTemplate">
            <nz-table #dataTable class="main-table" [nzData]="tableData" [nzTotal]="total" [nzFrontPagination]="false"
                [(nzPageIndex)]="pageNum" [(nzPageSize)]="pageSize" [nzLoading]="loading"
                (nzPageIndexChange)="queryInfo()" nzBordered nzSize="middle">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>职位</th>
                        <th>职责</th>
                        <th>技能</th>
                        <th>电话</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of dataTable.data">
                        <td>{{data.code}}</td>
                        <td>{{data.name}}</td>
                        <td>{{data.position}}</td>
                        <td>{{data.duty}}</td>
                        <td>{{data.skill}}</td>
                        <td>{{data.phone}}</td>
                        <td>
                            <a (click)="openEditModal(data)">编辑</a>
                            <nz-divider nzType="vertical"></nz-divider>
                            <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                                (nzOnConfirm)="onDelete(data.id)">
                                删除
                            </a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
        <ng-template #btnGroupWebTemplate>
            <button nz-button nzType="primary" *ngIf="selectedItem.id" (click)="openEditModal()">新增</button>
        </ng-template>
    </div>

    <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="660" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
        (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
        <form nz-form [formGroup]="folderForm">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">单位名称</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="name" placeholder="单位名称">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="24">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="3">单位职责</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <textarea nz-input formControlName="duty" rows="5" placeholder="单位职责"></textarea>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </nz-modal>

    <nz-modal nzClassName="custom-modal" nzWidth="760" [(nzVisible)]="userModalShow" [nzTitle]="userModalTitle"
        (nzOnCancel)="onUserCancel()" (nzOnOk)="onUserConfirm()">
        <form nz-form [formGroup]="form">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">编号</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="code" placeholder="编号">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">姓名</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="name" placeholder="姓名">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">职位</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="position" placeholder="职位">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">职责</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="duty" placeholder="职责">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">技能</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="skill" placeholder="技能">
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">电话</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="phone" placeholder="电话">
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </nz-modal>

</div>